<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>首页</title>
    <link href="../../css/mui.css" rel="stylesheet"/>
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../css/mui-icons-extra.css" rel="stylesheet"/>
	<style type="text/css">
		body { overflow: hidden; }
		#header { padding-top: 10px; width: 100%; text-align: center; 
			position: fixed; top: 0; z-index: 100; }
		#header b { padding: 10px; text-shadow: 1px 1px 3px #000; }
		/* 右下角菜单 */
		.app-menu { text-align: center; color: #F0F0F0; 
			text-shadow: 2px 2px 5px #000; 
			position: fixed; bottom: 100px; right: 15px; }
		.app-menu span { font-size: 30px; }
		.app-menu p { margin: 0; margin-bottom: 10px; 
			color: #F0F0F0; font-size: 12px; }
		/* 右上角菜单 */
		.app-cart { text-align: center; color: #F0F0F0; 
			text-shadow: 2px 2px 5px #000; font-weight: bolder;
			position: fixed; top: 50px; right: 15px; }
		.app-cart span { font-size: 40px; }
		.app-cart p { margin: 0; margin-bottom: 10px; 
			color: #F0F0F0; font-size: 14px; }
		/* 底部菜单 */
		.app-bottom { background: #DD0000; }
		.app-bottom span { color: #FFF; }
		.app-active { background: #FF0000; }
	</style>
</head>
<body>	
	<div id="header">
		<b style="color:#CCC;" onclick="jumpToIndex()">果干</b>
		<b style="color:#FFF;">农产品</b>
	</div>

	<!-- 主体布局 -->
	<div id="refresh"></div>
	<input type="text" id="vid" value="0" style="display:none;"/>
	<!-- 主体布局 -->
	
	<!-- 底部菜单 -->
	<nav class="mui-bar mui-bar-tab app-bottom">
		<a class="mui-tab-item app-active">
			<span class="mui-icon mui-icon-videocam"></span>
			<span class="mui-tab-label">视频</span>
		</a>
		<a class="mui-tab-item" onclick="jumpToShare()">
			<span class="mui-icon mui-icon-list"></span>
			<span class="mui-tab-label">佣金</span>
		</a>
	</nav>
	<!-- 底部菜单 -->
</body>
</html>

<script src="../../js/mui.js"></script>
<script src="../../js/app.js"></script>
<script type="text/javascript" charset="utf-8">
	var cw = document.documentElement.clientWidth; //屏幕宽度
	var ch = document.documentElement.clientHeight; //屏幕高度
	var domain = getDomain();
	//上拉下拉
	mui.plusReady(function () {
		mui.init({
			pullRefresh: {
				container: "#refresh",
				down: { //下拉刷新
					style: "circle",
					height: 100,
					auto: true,
					contentrefresh: "视频正在加载...",
					contentnomore: '没有更多视频了',
					callback: async function () { 
						getPreOne();
						mui('#refresh').pullRefresh().endPulldownToRefresh();
					}
				},
				up: { //上拉加载
					height: 100, 
					auto: false, 
					contentrefresh: "更多视频正在加载...", 
					contentnomore: '没有更多数据了', 
					callback: async function () { 
						getNextOne();
					}
				}
			}
		});
	});
	function getPreOne(){
		// mui.toast('pre')
		getReqOne(2);
	}
	function getNextOne(){
		// mui.toast('next')
		getReqOne(1);
	}
	//获取数据
	function getReqOne(oper){
		var vid = mui('#vid')[0].value;
		var formData = {
			id:vid, oper:oper
		};
		mui.ajax(domain+'/video/side', {
			type:'post', 
			data:formData,
			dataType:'json', 
			timeout:timeout, 
			headers:headers, 
			success:function(res){
				if (res.code!=0) {
					mui.toast('没有视频'); return
				}
				mui("#refresh")[0].innerHTML = showIndex(res.data);
				mui('#vid')[0].value = res.data.id;
				mui('#refresh').pullRefresh().endPullupToRefresh(false); 
			},
			error:function(){
				mui.toast('网络错误！');
			}
		});
	}
	//显示列表
	function showIndex(v){
		var ch2 = ch - 45;
		var cover = v.cover; var link = v.link;
		var h = '';
		h = '<div class="app-video" style="width:100%;height:100%;">';
		h += '<video poster="'+cover+'" type="video/mp4" name="media" style="width:'+cw+'px;height:'+ch2+'px;object-fit:fill;" controls="controls" autoplay="autoplay" loop controlsList="nodownload"><source src="'+link+'" type="video/mp4"></video>'; 
		h += '</div>';
		//右下角菜单
		h += '<div class="app-menu">';
		h += '<span class="mui-icon-extra mui-icon-extra-heart-filled" onclick="mui.toast(\'待接入..\')"></span>';
		h += '<p>0</p>';
		h += '<span class="mui-icon mui-icon-starhalf" onclick="mui.toast(\'待接入..\')"></span>';
		h += '<p>0</p>';
		h += '<span class="mui-icon mui-icon-chat" onclick="mui.toast(\'待接入..\')"></span>';
		h += '<p>0</p>';
		h += '<span class="mui-icon mui-icon-redo" onclick="mui.toast(\'待接入..\')"></span>';
		h += '<p>0</p>';
		h += '</div>';
		//右上角菜单
		h += '<div class="app-cart">';
		h += '<span class="mui-icon-extra mui-icon-extra-cart" style="color:red;" onclick="mui.toast(\'待接入..\')"></span>';
		h += '<p style="color:red;">购买</p>';
		h += '</div>';
		return h;
	}
	//跳转到果干
	function jumpToIndex(){
		mui("#refresh")[0].innerHTML = ''; 
		var tourl = '/views/index.html';
		mui.plusReady(function () {
			plus.webview.open(tourl);
		});	
	}
	//跳转到佣金
	function jumpToShare(){
		mui("#refresh")[0].innerHTML = ''; 
		var tourl = '/views/share.html';
		mui.plusReady(function () {
			plus.webview.open(tourl);
		});	
	}
</script>